<template>
  <div class="container">
    <top></top>
    <mall-header></mall-header>
    <navBar></navBar>
    <Carousel></Carousel>
    <div class="bg2" :style="{  backgroundImage: `url(${require('@/assets/images/supplierDisplayCenter/bg2.png')})` }" >
      <bidAnnouncement></bidAnnouncement>
    <opportunity></opportunity>
    <selectedSuppliers></selectedSuppliers>
    </div>
    <videoClassroom></videoClassroom>
    <!-- <hot></hot> -->
    <!-- <div class="severChat" @click="toServer">
      <img src="@/assets/servicer.png" alt="" class="severChat_ico">
      <div>客服</div>
    </div> -->
    <!-- <Zone-banner @open="bannerOpenZone" :carousel-list="zoneBannerList"></Zone-banner> -->
    <!-- <brand @list="toBrandList"></brand> -->
    <!-- <floor v-for="(floor, index) in floorList" :show-bg="index % 2 !== 0" :key="floor.id" :name="floor.name"
      :en-name="floor.enName" :data="floor.floorGoodsList" @detail="toDetail" @list="toList"></floor> -->
     <mall-footer></mall-footer>
  </div>
</template>

<script>
import Top from '@/components/base/Top.vue'
import MallFooter from '@/components/base/MallFooter.vue'
import MallHeader from '@/components/base/MallHeader.vue'
import NavBar from '@/components/base/navBar.vue'
import Carousel from '@/components/base/Carousel.vue'
import Type from '@/components/Type'
import Banner from './components/Banner'
import selectedSuppliers from './components/selectedSuppliers'
import videoClassroom from './components/videoClassroom'

import Hot from './components/Hot'
import opportunity from './components/opportunity'
import Brand from './components/Brand'
import ZoneBanner from '../zones/components/ZoneBanner'
import bidAnnouncement from './components/bidAnnouncement'
import Floor from './components/Floor'
import storage from '@/utils/storage'
import { getCycleimgsList, getPortalFloorList, qrySpecialAreaPage, onlineService } from '@/api/portal'
import { queryGoodsType } from '@/api/goods/type'

export default {
  name: 'Portal',
  components: {
    Floor,
    Top,
    NavBar,
    MallFooter,
    MallHeader,
    Carousel,
    Type,
    Banner,
    Hot,
    Brand,
    ZoneBanner,
    bidAnnouncement,
    opportunity,
    selectedSuppliers,
    videoClassroom
  },
  data() {
    return {
      carouselList: [],
      zoneBannerList: [],
      treeData: [],
      floorList: [],
      chatUrl: '',
      params: {
        page: 1,
        limit: 50,
        pid: 0,
        startTime: new Date().getTime(),
        endTime: new Date().getTime(),
        status: '1',
        sortMode: 0
      }
    }
  },
  created() {
    this.loadTypeList()
    this.loadImgList()
    this.loadZoneList()
    this.loadFloor()
    this.onService()

  },
  computed: {
    orgId() {
      if (process.env.NODE_ENV === 'development') return storage.session.get('role') // 'DATA_BUSINESS'
      let info = storage.session.get('userInfo')
      return info ? (info.deptId || '') : ''
    }
  },
  methods: {
    escapeUrl(url) {
      let escUrl = encodeURIComponent(url);
      return escUrl
    },
    toJump() {
      // const url = `https://www.baidu.com?userToken=${userToken}`
      const url = 'https://dthg.szdex.com:30921/home?userToken=${userToken}'

      // https://合规系统url?userToken=${userToken}
      window.open(url, '_self', 'noopener=yes,noreferrer=yes')

    },
    toServer() {
      if (this.chatUrl) window.open(this.chatUrl)
    },
    async onService() {
      let info = storage.session.get('userInfo') || {}
      let openid = info.phone || ''
      let res = await onlineService({ openid })
      this.chatUrl = res.data
    },
    loadImgList() {
      getCycleimgsList({ position: '1' }).then(res => {
        if (res.code === 0) {
          this.carouselList = res.data
        }
      })
    },
    loadZoneList() {
      qrySpecialAreaPage(this.params).then(res => {
        if (res.code === 0) {
          let { records } = res.data
          if (records.length > 3 && records.length < 6) records = [...records, ...records]
          this.zoneBannerList = records
        }
      })
    },
    loadTypeList() {
      queryGoodsType().then(res => {
        if (res.code === 0) {
          this.treeData = this.generateTreeData(res.data)
        }
      })
    },
    generateTreeData(list) {
      // 展示第二级分类
      let temp = list.filter(item => item.level === 2)
      for (let i = 0; i < temp.length; i++) {
        temp[i].children = list.filter(item => item.parentId === temp[i].id)
        temp[i].children.sort((a, b) => {
          return a.sort - b.sort
        })
        console.log(temp[i])
      }
      return temp.filter(item => item.children && item.children.length > 0)
    },
    loadFloor() {
      getPortalFloorList().then(res => {
        if (res.code === 0) {
          let list = res.data
          list.sort((a, b) => a.orderNum - b.orderNum)
          this.floorList = list
        }
      })
    },
    toDetail(id) {
      this.$router.push({
        path: '/goodsDetail',
        query: { id: id }
      })
    },
    toList(type, url) {
      if (url) return window.open(url)
      if (type) this.$router.push({
        path: '/goodsList',
        query: { type }
      })
    },
    toBrandList(supplierId) {
      this.$router.push({
        path: '/goodsList',
        query: { supplier: supplierId }
      })
    },
    bannerOpen(item) {
      if (item.openType && item.openUrl) {
        if (item.openType === '1') {
          location.href = item.openUrl
        } else {
          window.open(item.openUrl, '_blank')
        }
      }
    },
    bannerOpenZone({ id, pid }) {
      this.$router.push({
        path: '/zoneDetail',
        query: { id, pid }
      })
    }
  }
}
</script>

<style scoped lang="scss">
$width: 1200px;
$mainColor: #3370FF;
$largeWidth: 1500px;

.severChat {
  position: fixed;
  cursor: pointer;
  right: 6%;
  bottom: 10%;
  text-align: center;
  background-color: #fff;
  z-index: 99;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 4px;

  &_ico {
    width: 36px;
    height: 36px;
  }
}

.gard {
  margin-bottom: -46px;
  height: 46px;
  background: #FAFAFA;
  width: 100%;
}

.tags {
  height: 46px;
  line-height: 46px;
  display: flex;
}

.tag {
  font-size: 16px;
  font-weight: 700;
  margin: 0 25px;
  cursor: pointer;
}

.tag-check {
  position: relative;

  &::after {
    content: '';
    height: 6px;
    display: block;
    margin: -18px -6px 0px;
    border-radius: 10px;
    background-image: linear-gradient(to right, #037afa, #9ee389);
  }
}

.container {
  width: 100%;
  min-height: 100%;
  background: white;
}

.w1200 {
  width: $width;
  margin: 0 auto;
}

.topbannar {
  display: flex;
  padding-bottom: 20px;
  position: relative;
}

.bannerdiv {
  flex: 1;
  margin-left: 20px;
  width: 0;
}
.bg2 {
  background-repeat: no-repeat;
        background-size: 100% 100%;
  padding: 40px 0;
}

</style>
